<template>
	<view class="question-wrap">
		<cu-custom bgColor="bg-gradual-fff" isBack="true">
			<block slot="content">登录授权</block>
		</cu-custom>
		<loading-view v-show="showLoading"></loading-view>
		<view v-show="!showLoading">
			<view class="login" v-if="is_auth">
				<view class="login_a">
					<image :src="avatar_logo"></image>
				</view>
				<view class="login_bb">{{ nickName }}</view>
				<view class="login_d" @click="mpWxLogin()">手机号快捷登录</view>
				<button class="login_e" @click="navigateBack_ls();">暂不授权</button>
			</view>
			<view class="login" v-else>
				<button class="login_a" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<image :src="avatar_logo"></image>
				</button>
				<view class="login_b">
					<view class="login_b_a">昵称</view>
					<view class="login_b_b">
						<input type="nickname" v-model="nickName" @blur="nickName_blur" class="weui-input" placeholder="请输入昵称" />
					</view>
				</view>
				<view class="login_c">为了提供更优质的服务，需要获取您的手机号</view>
				<button class="login_d" type="primary" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
					withCredentials="true">手机号快捷登录</button>
				<button class="login_e" @click="navigateBack_ls();">暂不授权</button>
			</view>
		</view>
	</view>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import api from '../../common/apiService';
import request from '@/common/request.js';

const { loginWithCode, uploadAvatar, finalizeLogin } = api;
const showLoading = ref(true);
const avatar = ref('');
const avatar_logo = ref(request.baseUrl + 'img/avatar.png');
const nickName = ref('');
const code = ref('');
const encryptedData = ref('');
const iv = ref('');

onMounted(() => {
	wx.login({
		success: (loginRes) => {
			code.value = loginRes.code;
			loginWithCode(code.value).then((data) => {
				avatar.value = data.avatar;
				avatar_logo.value = data.avatar_logo;
				nickName.value = data.nickName;
				showLoading.value = false;
			}).catch(error => {
				showLoading.value = false;
				console.error('Login error:', error);
				uni.showToast({
					title: '登录失败，请重试',
					icon: 'none'
				});
			});
		},
	});
});

const onChooseAvatar = (e) => {
	const { avatarUrl } = e.detail;
	uploadAvatar(avatarUrl).then((res) => {
		avatar_logo.value = request.baseUrl + res.data.uri;
		avatar.value = request.baseUrl + res.data.uri;
	}).catch(error => {
		console.error('Upload avatar error:', error);
		uni.showToast({
			title: '上传头像失败，请重试',
			icon: 'none'
		});
	});
};
const getPhoneNumber = (e) => {
	encryptedData.value = e.detail.encryptedData;
	if (!encryptedData) {
		uni.showToast({
			title: '您已拒绝授权，请重新点击并授权',
			icon: 'none',
			duration: 2000
		});
		return;
	}
	iv.value = e.detail.iv;
	if (!avatar) {
		uni.showToast({
			title: '请上传头像',
			icon: 'none',
			duration: 2000
		});
		return;
	}
	if (!nickName) {
		uni.showToast({
			title: '请输入昵称',
			icon: 'none',
			duration: 2000
		});
		return;
	}
	mpWxLogin();
}
const mpWxLogin = () => {
	uni.showLoading({
		title: '登录中...',
		mask: true,
	});
	const params = {
		code: code.value,
		nickname: nickName.value,
		avatar: avatar.value,
		encryptedData: encryptedData.value,
		iv: iv.value,
	};
	finalizeLogin(params).then((data) => {
		console.log("data",data)
		uni.setStorageSync("uid",data.uid)
		uni.hideLoading();
		uni.showToast({
			title: '登录成功',
			icon: 'success',
			duration: 2000,
		});
		setTimeout(() => {
			uni.redirectTo({
				url: '/pages/index/index',
			});
		}, 2000);
	}).catch(error => {
		uni.hideLoading();
		console.error('Login finalize error:', error);
		uni.showToast({
			title: '登录失败，请重试',
			icon: 'none'
		});
	});
};
</script>

<style>
page {
	width: 100%;
	height: 100%;
}

.question-wrap {
	background-size: 100%;
	width: 100%;
	min-height: 100%;
	background-repeat: no-repeat;
}

.login_a {
	width: 221rpx;
	height: 221rpx;
	margin: auto;
	margin-top: 135rpx;
	border-radius: 50%;
	padding: 0;
	overflow: hidden;
	background-color: #FFFFFF;
	border: 0;
}

.login_a image {
	width: 221rpx;
	height: 221rpx;
	border-radius: 50%;
}

.login_b {
	width: 500rpx;
	height: 100rpx;
	border: 1rpx solid #cccccc;
	border-radius: 10rpx;
	margin: auto;
	margin-top: 24rpx;
	padding: 0 30rpx;
}

.login_b_a {
	float: left;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #333333;
	line-height: 100rpx;
}

.login_b_b {
	float: right;
	width: 350rpx;
	height: 100rpx;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 500;
	line-height: 100rpx;
}

.login_b_b input {
	width: 350rpx;
	height: 100rpx;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 500;
	line-height: 100rpx;
}

.login_c {
	font-size: 24rpx;
	font-family: DengXian;
	font-weight: bold;
	color: #7E7E7E;
	text-align: center;
	margin: auto;
	margin-top: 22rpx;
}

.login_d {
	width: 503rpx;
	height: 79rpx;
	background-color: #D3195E !important;
	border-radius: 40rpx;
	font-size: 30rpx;
	font-family: DengXian;
	font-weight: bold;
	color: #FFFFFF;
	line-height: 79rpx;
	text-align: center;
	margin: auto;
	margin-top: 93rpx;
}

.login_e {
	width: 503rpx;
	height: 79rpx;
	background: #BDBDBD;
	border-radius: 40rpx;
	font-size: 30rpx;
	font-family: DengXian;
	font-weight: bold;
	color: #FFFFFF;
	line-height: 79rpx;
	text-align: center;
	margin: auto;
	margin-top: 26rpx;
}

.login_bb {
	font-size: 30rpx;
	font-family: DengXian;
	font-weight: bold;
	color: #000000;
	margin-top: 24rpx;
	text-align: center;
}
</style>